<template>

<div>
<el-radio v-model="a" label="1">备选项</el-radio>
  <el-radio v-model="a" label="2">备选项</el-radio>
  <br>
  <br>


  <el-radio-group v-model="b">
    <el-radio :label="3">备选项</el-radio>
    <el-radio :label="6">备选项</el-radio>
    <el-radio :label="9">备选项</el-radio>
  </el-radio-group>

  <br>
  <br>

 <el-radio-group v-model="c">
      <el-radio-button label="江苏"></el-radio-button>
      <el-radio-button label="浙江"></el-radio-button>
      <el-radio-button label="上海"></el-radio-button>
    </el-radio-group>



    <h1>多选</h1>
    <br>
    <br>
    <el-checkbox-group v-model="checkList">
    <el-checkbox label="选项 1"></el-checkbox>
    <el-checkbox label="选项 2"></el-checkbox>
    <el-checkbox label="选项 3"></el-checkbox>
    <el-checkbox label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
  </el-checkbox-group>
  <br>
  <br>
  <br>
  <br>

  <el-checkbox :indeterminate="isIndeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>
  <div style="margin: 15px 0;"></div>
  <el-checkbox-group v-model="checkedCities" @change="handleCheckedCitiesChange">
    <el-checkbox v-for="city in cities" :label="city" :key="city">{{city}}</el-checkbox>
  </el-checkbox-group>





</div>

  
</template>

<script>
 const cityOptions = ['江苏', '浙江', '上海'];
export default {
name:'Radio',
 data () {
      return {
        a: '1',
        b:'3',
        c:'上海',
         checkList: ['选中且禁用','复选框 A'],
          checkAll: false,
        checkedCities: ['上海', '北京'],
        cities: cityOptions,
        isIndeterminate: true
      };
    },
    methods: {
      handleCheckAllChange(val) {
        this.checkedCities = val ? cityOptions : [];
        this.isIndeterminate = false;
      },
      handleCheckedCitiesChange(value) {
        let checkedCount = value.length;
        this.checkAll = checkedCount === this.cities.length;
        this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
      }
    }



}
</script>

<style>

</style>